<template>
  <div class="bottom-menu">
    <div v-for="menu in menuLists" :key="menu.menuIndex" @click="clickMenu(menu)" :class="[(currentIndex.split('-')[0] == menu.menuIndex) ? 'active' : '','menu-item']">
      <div>
		<span :class="['icon',menu.class]"></span>
	  	{{ menu.menuName }}
		<div :class="['submenu',firstLevelMenuActiveIndex == menu.menuIndex ? 'activeMenu':'']" v-if="menu.submenu">
		  <div :class="['submenu-item',route.fullPath == subItem.pagePath ?'activesubmenu':'']" v-for="subItem in menu.submenu" :key="subItem.menuIndex" @click="clickSubMenu(subItem)">
			{{ subItem.menuName }}
		  </div>
		</div>
	  </div>
    </div>
  </div>
</template>

<script setup>
const router = useRouter()
const route = useRoute()
let currentIndex = ref("1-1");
let firstLevelMenuActiveIndex = ref("");
let menuLists = ref([
	{
		menuIndex:"1",
		menuName: '实况监测',
		pagePath: '/skweatherlive',
		class:"sk",
		// submenu:[
		// 	{
		// 		pagePath: '/skweatherlive',
		// 		menuIndex:"1-1",
		// 		menuName: '天气实况',
		// 	}
		// 	// {
		// 	// 	pagePath: '/skclimateBg',
		// 	// 	menuIndex:"1-2",
		// 	// 	menuName: '气候背景',
		// 	// }
		// ]
    },
	{
		menuIndex:"2",
		menuName: '预报预警',
		class:"yb",
		submenu:[
			{
				pagePath: '/ybwarninfo',
				menuIndex:"2-1",
				menuName: '预警信息',
			},
			{
				pagePath: '/ybweatherforecast',
				menuIndex:"2-2",
				menuName: '天气预报',
			}
		]
	},
	{
		menuIndex:"3",
		class:"word",
		menuName: '专题报告',
		submenu:[
			{
				pagePath: "/specialReport/1",
				menuIndex:"3-1",
				menuName: '一周天气',
			},
			{
				pagePath: "/specialReport/2",
				menuIndex:"3-2",
				menuName: '重要天气报告',
			},
			{
				pagePath: "/specialReport/9",
				menuIndex:"3-3",
				menuName: '天气快报',
			},
			{
				pagePath: "/specialReport/32",
				menuIndex:"3-4",
				menuName: '短期气候预测',
			},
			{
				pagePath: "/specialReport/33",
				menuIndex:"3-5",
				menuName: '气候评价',
			},
		]
	},
])


const clickMenu = (menu)=>{
	if(!menu.submenu){
		currentIndex.value = menu.menuIndex;
		router.push({ path:menu.pagePath })
	}else{
		if(firstLevelMenuActiveIndex.value != menu.menuIndex){
		 	firstLevelMenuActiveIndex.value = menu.menuIndex;
		}else{
			firstLevelMenuActiveIndex.value = "";
		}
	}
}

const clickSubMenu = (submenu)=>{
	currentIndex.value = submenu.menuIndex;
	console.log(currentIndex.value.split('-')[0])
	router.push({ path:submenu.pagePath })
}

</script>


<style lang="scss">
.bottom-menu {
	width: 100%;
	height: 50px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #ddd; 
	color: #000;
	.menu-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		.icon{
			background-repeat: no-repeat;
			background-position: center center;
			height: 20px;
			width: 100%;
			background-size: contain;
			display: block;
			&.sk{
				background-image: url("@/assets/images/sk.png");
			}
			&.yb{
				background-image: url("@/assets/images/yb.png");
			}
			&.word{
				background-image: url("@/assets/images/word.png");
			}
		}
		&.active{
			font-weight: bold;
			color: rgba(51, 95, 209, 1);
			.sk{
				background-image: url("@/assets/images/skActive.png");
			}
			.yb{
				background-image: url("@/assets/images/ybActive.png");
			}
			.word{
				background-image: url("@/assets/images/wordActive.png");
			}
		}
		.submenu {
		  position: absolute;
		  bottom: 100%;
		  left: 2px;
		  right: 2px;
		  color: #000;
		  background-color: #fff;
		  display: none;
		  flex-direction: column;
		  border-top:1px solid #ddd;
		  border-left:1px solid #ddd;
		  border-right:1px solid #ddd;
		  font-weight: normal;
		  &.activeMenu{
			  display: block;
		  }
		}
		.menu-item:hover .submenu {
		  display: flex;
		}
		.submenu-item {
		  flex: 1;
		  padding: 8px 5px;
		  cursor: pointer;
		  border-bottom:1px solid #ddd;
		  color: #000;
		  &.activesubmenu{
			color:#fff;
			// font-weight: bold;
			background: rgba(51, 95, 209, 1);
		  }
		}
		 
		.submenu-item:hover {
		  background-color: #eee;
		}
	}
}
</style>

